<template>
  <div v-if="ticket.status===0" class="buyTicket">
    <div class="ticket-introduce cenLeft">
      <div class="ticket-logo cenCen">
        <img v-if="ticket.ticketUrl" :src='ticket.ticketUrl'>
        <img v-else src="https://img.alicdn.com/tfs/TB1BCjlI7voK1RjSZFNXXcxMVXa-130-160.png">
      </div>
      <div class="ticket-introduce-con">
        <div class="con-tit-box cenLeft">
          <div class="con-tit">
            {{ ticket.tname }}
          </div>
          <div class="con-data">
            {{ $moment(ticket.stime).format('MM月DD日') }}- {{ $moment(ticket.etime).format('MM月DD日') }} {{ ticket.tTypeDate }}
          </div>
        </div>
        <div class="ticket-equity cenLeft">
          票品权益:{{ initDetail(ticket.detail) }}
        </div>
      </div>
    </div>
    <div class="btn-box">
      <div class="btn-con cenLeft">
        <span v-if="ticket.enote&&ticket.sprice!=ticket.eprice" :class="[{'earlyBirdPrice':ticket.enote=='早鸟价'},{'originalPrice':ticket.enote=='原价'}]" class="ticket-tit discountPrice ">
          {{ ticket.enote }}
        </span>
        <span v-if="ticket.eprice!==null&&ticket.eprice!==''" class="newPrice">
          ¥{{ ticket.eprice }}
        </span>
        <span v-if="ticket.sprice&&ticket.sprice!=ticket.eprice" class="oldPrice">
          原价:
          <a href="javascript:void(0);">
            {{ ticket.sprice }}
          </a>
          元
        </span>
        <span v-if="ticket.vnote" class="price-explain">
          {{ ticket.vnote }}
        </span>
      </div>
      <div v-if="(Number(ticket.inum) || 0)<=0||$store.state.buyTicket.soldOut" class="ticket-num-box btn-statue cenCen">
        已售罄
      </div>
      <div v-else-if="ticket.status===1" class="ticket-num-box btn-statue cenCen">
        已下架
        <!-- 最上方已经控制 -->
      </div>
      <div v-if="ticket.status===0&&(Number(ticket.inum) || 0)>0&&!$store.state.buyTicket.soldOut" class="ticket-num-box cenCen">
        <div style="padding-bottom: 3px;" :class="{'notReduce':initTicketNum(ticket.ticketId)===0}" class="btn-reduce cenCen" @click="upDataCarTicket('reduceTicket')">
          -
        </div>
        <div style="border-left:0px;border-right:0px;background: #1D1E1F;" class="btn-num cenCen">
          {{ initTicketNum(ticket.ticketId) }}
        </div>
        <div class="btn-add cenCen" @click="upDataCarTicket('addTicket')">
          +
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// address: 地址
// createTime: 创建时间
// detail: 权益
// enote: 折扣标签
// eprice: 折扣价格
// etime: 结束时间
// exclusive: 排他
// inum: 库存
// isDel: 删除标记
// pricegroupId: 价格租id
// pricegroupbId: 价格租子id
// snote  价格标签
// snum: 销量
// sprice: 销售价格
// status: 状态  0-上架 1-下架
// stime: 开始时间
// tTypeDate: 门票日期
// ticketId: 票id
// tname: 票名称
// updateTime: 更新时间
// vnote: 备注

import buyTicket from "./../../js/buyTicket.js";
export default {
  props: ["ticket"],
  methods: {
    // 初始化票的数量
    initTicketNum(ticketId) {
      let num = 0;
      let carTicketList = this.$store.state.buyTicket.carTicketList;
      for (let i = 0; i < carTicketList.length; i++) {
        if (
          carTicketList[i].body_ticket &&
          carTicketList[i].body_ticket.length != 0 &&
          ticketId === carTicketList[i].body_ticket[0].ticketId
        ) {
          num = carTicketList[i].body_ticket.length;
          break;
        }
      }
      return num;
    },
    // 初始化票权益
    initDetail(ticketDetail) {
      try {
        let detail = "";
        let detailArr = JSON.parse(ticketDetail);
        for (let i = 0; i < detailArr.length; i++) {
          if (i < detailArr.length - 1) {
            detail += detailArr[i] + " / ";
          } else {
            detail += detailArr[i];
          }
        }
        return detail;
      } catch (error) {
        return ticketDetail;
      }
    },
    // 更新购物车信息(加减票)
    upDataCarTicket(operator) {
      buyTicket.upDataCarTicket(operator, this.ticket);
    }
  }
};
</script>

 <style scoped>
.buyTicket {
  width: 100%;
  height: auto;
  min-height: 160px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(61, 61, 61, 0.8);
  border-radius: 4px;
  padding: 18px 18px 0px 18px;
  margin-top: 16px;
}
.ticket-introduce {
  width: 100%;
  height: auto;
  align-items: flex-start;
  position: relative;
}
.ticket-logo {
  width: 120px;
  height: auto;
  min-height: 120px;
  max-height: 200px;
  background: #413d3d;
  /* border: 1px solid #979797; */
  position: absolute;
  top: 6px;
  left: 0px;
  overflow: hidden;
}
.ticket-logo > img {
  width: 100%;
  height: auto;
  float: left;
}
.ticket-introduce-con {
  width: 100%;
  height: auto;
  min-height: 130px;
  padding-left: 138px;
}
.con-tit-box {
  width: auto;
  height: auto;
  flex-wrap: wrap;
}
.con-tit {
  /* font-family: PingFangSC-Medium; */
  font-size: 28px;
  color: #ffffff;
  text-align: left;
  margin-right: 16px;
}
.con-data {
  opacity: 0.4;
  /* font-family: PingFangSC-Regular; */
  font-size: 20px;
  color: #eeeeee;
  text-align: left;
}
.ticket-equity {
  width: 100%;
  height: auto;
  /* max-height: 90px; */
  text-align: left;
  opacity: 0.6;
  font-size: 22px;
  color: #ffffff;
  /* overflow-y: auto; */
  line-height: 30px;
  /* overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-line;
  align-items: flex-start; */
}
.btn-con {
  width: 100%;
  height: auto;
  min-height: 86px;
  text-align: left;
  padding: 10px 0px;
  flex-wrap: wrap;
}
.ticket-tit {
  width: auto;
  min-width: 66px;
  min-height: 30px;
  height: auto;
  line-height: 30px;
  text-align: center;
  /* font-family: PingFangSC-Regular; */
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 18px;
  color: #ffffff;
  display: inline-block;
  margin: 6px 14px 0px 0px;
}

/* 折扣价 */
.discountPrice {
  background-image: linear-gradient(
    -67deg,
    #00e7be 0%,
    #19b1df 44%,
    #2389f6 91%
  );
}
/* 早鸟价 */
.earlyBirdPrice {
  background-image: linear-gradient(-116deg, #ff6325 0%, #ed006f 100%);
}
/* 原价 */
.originalPrice {
  background-image: linear-gradient(43deg, #0080ec 0%, #0ec470 100%);
}
/* 现价 */
.newPrice {
  /* font-family: PingFangSC-Medium; */
  font-size: 28px;
  color: #ffffff;
  text-align: center;
  height: 40px;
  line-height: 45px;
  width: auto;
  margin-right: 14px;
  color: #0ce4a2;
}
.oldPrice {
  opacity: 0.4;
  /* font-family: PingFangSC-Regular; */
  font-size: 18px;
  color: #eeeeee;
  margin-right: 14px;
}
.oldPrice > a {
  text-decoration: line-through;
  /* font-family: PingFangSC-Regular; */
  font-size: 18px;
  color: #eeeeee;
}
.price-explain {
  opacity: 0.8;
  /* font-family: PingFangSC-Regular; */
  font-size: 18px;
  color: #eeeeee;
  margin-top: 6px;
}
/* 按钮操作部分 */
.btn-box {
  width: 100%;
  height: auto;
  min-height: 86px;
  border-top: 1px solid #38393b;
  margin-top: 36px;
  text-align: left;
  position: relative;
  padding-right: 160px;
  /* border: 1px solid red; */
}

/* 按钮部分 */
.ticket-num-box {
  position: absolute;
  right: 0px;
  top: 0px;
  width: auto;
  height: 100%;
  /* border: 1px solid red; */
}

.btn-statue {
  /* font-family: PingFangSC-Medium; */
  font-size: 26px;
  color: #eeeeee;
}
.btn-reduce {
  width: 48px;
  height: 48px;
  border: 1px solid #636566;
  opacity: 0.6;
  background: rgba(33, 35, 37, 0.3);
  /* font-family: PingFangSC-Thin; */
  font-size: 34px;
  color: #eeeeee;
  border-right: none;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
  cursor: pointer;
}
.btn-num {
  width: 59px;
  height: 48px;
  background: rgba(45, 47, 50, 0.7);
  border: 1px solid #404343;
  /* font-family: PingFangSC-Regular; */
  font-size: 30px;
  color: #eeeeee;
}
.btn-add {
  width: 48px;
  height: 48px;
  border: 1px solid #636566;
  opacity: 0.6;
  background: rgba(33, 35, 37, 0.3);
  /* font-family: PingFangSC-Thin; */
  font-size: 34px;
  color: #eeeeee;
  border-left: none;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  cursor: pointer;
  padding-bottom: 3px;
}
.btn-reduce:active,
.btn-add:active {
  background: rgba(255, 255, 255, 0.3);
}
.notReduce {
  opacity: 0.5;
  background: #212325;
  border: 1px solid #5f6060;
}
</style>
 